<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/szjc.png" alt="">
      </div>
      <h2>近七天水质检测</h2>
      <div class="more" @click="getMore">
        <h2>查看更多</h2>
        <img src="@/assets/img/add.png" alt="">
      </div>
    </div>
    <div class="monitor_cont">
      <div class="monitor_btn">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="余 氯" name="fd_waterqua_cl"></el-tab-pane>
          <el-tab-pane label="浊 度" name="fd_waterqua_turb"></el-tab-pane>
          <el-tab-pane label="PH 值" name="fd_waterqua_ph"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="monitor_echarts">
        <div id="monitor_main"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  name: 'chart',
  data() {
    return {
      // colors: ['#41d5ff', '#29dc8d', '#f1c642'],
      activeName: 'fd_waterqua_cl',
      myChart: {},
      siteId: null,
      siteNo: null,
      data: []
    }
  },
  async created() {
    this.getData(this.siteId,this.siteNo)
  },
  mounted() {
    //根据窗口变化自动调节图表大小
    window.addEventListener('resize', () => {
      this.myChart.resize()
      // this.chartSize(document.querySelector('.monitor_echarts'))
    })
  },
  methods: {
    // 点击查看更多
    getMore() {
      this.$emit('more3', 3)
    },
    changeData(value,value2) {
      this.siteId = Number(value)
      this.siteNo = Number(value2)
      this.getData(this.siteId,this.siteNo)
    },
    async getData(idNum,idNum2) {
      // 接口参数
      const id = { tenantid: 1128, siteId: idNum, siteNo: idNum2 }
      const res = await api.monitor(id)
      this.data = res.data
      // console.log(idNum,idNum2)
      // console.log(res)
      for (let k in this.data) {
        for (let i = 0; i < this.data[k].fd_data.length; i++) {
          this.data[k].fd_data[i] = this.data[k].fd_data[i].substring(5, this.data[k].fd_data[i].length);
        }
      }

      let show_data = {}

      switch (this.activeName) {
      case 'fd_waterqua_cl':
        show_data.high = this.data[this.activeName].high_cnt_cl
        show_data.in = this.data[this.activeName].in_cnt_cl
        show_data.low = this.data[this.activeName].low_cnt_cl
        show_data.fd_data = this.data[this.activeName].fd_data
        show_data.water_cnt = this.data[this.activeName].water_cnt
        break
      case 'fd_waterqua_ph':
        show_data.high = this.data[this.activeName].high_cnt_ph
        show_data.in = this.data[this.activeName].in_cnt_ph
        show_data.low = this.data[this.activeName].low_cnt_ph
        show_data.fd_data = this.data[this.activeName].fd_data
        show_data.water_cnt = this.data[this.activeName].water_cnt
        break
      case 'fd_waterqua_turb':
        show_data.high = this.data[this.activeName].high_cnt_turb
        show_data.in = this.data[this.activeName].in_cnt_turb
        show_data.low = this.data[this.activeName].low_cnt_turb
        show_data.fd_data = this.data[this.activeName].fd_data
        show_data.water_cnt = this.data[this.activeName].water_cnt
        break
      }
      console.log(show_data)

      this.initChart(show_data)
    },
    // 点击切换数据
    handleClick() {
      this.getData(this.siteId,this.siteNo)
    },
    // 图表初始化
    initChart(data) {
      this.myChart = this.$echarts.init(document.getElementById('monitor_main'))
      const colors = ['#41d5ff', '#29dc8d', '#f1c642', '#16b4e5']
      this.myChart.setOption({
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '10%',
          top: '23%',
          bottom: '19%',
          left: '15%',
          // x: "12%",//x 偏移量
          // y: "7%", // y 偏移量
          // width: '100%', // 宽度
          // height: '100%'
        },
        legend: {
          data: ['低区', '中区', '高区', '进水'],
          top: '3%',
          itemHeight: 5,
          itemWidth: 5,
          textStyle: {
            color: colors,
            fontSize: '10px'
          }
        },
        xAxis: [
          {
            type: 'category',
            show: true,
            data: data.fd_data,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: colors[0]
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '低区',
            position: 'right',
            alignTicks: true,
            splitLine: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: colors[0]
              }
            },
            axisTick: {
              show: true,
              inside: true,
              length: 3
            }
          },
          {
            type: 'value',
            position: 'left',
            alignTicks: true,
            splitLine: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: colors[0]
              }
            },
            axisTick: {
              show: true,
              inside: true,
              length: 3
            }
          }
        ],
        series: [
          {
            name: '低区',
            type: 'bar',
            data: data.low
          },
          {
            name: '中区',
            type: 'bar',
            data: data.in
          },
          {
            name: '高区',
            type: 'bar',
            // yAxisIndex: 1,
            data: data.high
          },
          {
            name: '进水',
            type: 'line',
            yAxisIndex: 1,
            data: data.water_cnt
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.modular {
  // margin: 0.2rem 0;

  .monitor_cont {
    width: 100%;
    height: 2.9rem;
    display: flex;
    flex-direction: column;

    .monitor_btn {
      width: 100%;
      height: 28%;
    }

    .monitor_echarts {
      width: 100%;
      height: 65%;

      #monitor_main {
        width: 100%;
        height: 100%;
      }
    }


    .monitor_btn {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
